<template>
  <div class="login_wrapper">
		<section class="login_block">
			<h1>餐饮管理系统</h1>
			<p class="welcome">欢迎登录</p>
			<el-radio-group v-model="role" size="large">
				<el-radio-button value="admin">
					<template #default>
						<div class="button-block">
							<el-icon :size="16">
								<UserIcon />
							</el-icon>
							<span>管理员</span>
						</div>
					</template>
				</el-radio-button>
				<el-radio-button value="business">
					<div class="button-block">
						<el-icon :size="16">
							<BusinussIcon />
						</el-icon>
						<span>商家</span>
					</div>
				</el-radio-button>
			</el-radio-group>
			<el-form ref="formObj" :model="wyform" :rules="rules">
				<el-form-item prop="username">
					<el-input
						v-model="wyform.username"
						:placeholder="user_placeholder"
						:prefix-icon="UserIcon"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						v-model="wyform.password"
						placeholder="请输入密码"
						show-password
						:prefix-icon="LockIcon"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button style="width: 100%;" type="primary" @click="login">登录</el-button>
				</el-form-item>
			</el-form>
			<div class="register">
				<span>还没有账号?</span>
				<el-link href="/business/add" type="primary" :underline="false">商家注册</el-link>
			</div>
			<div class="demo">
				<h5>演示账号:</h5>
				<div class="login_user">
					<div>
						<span>管理员:</span>
						<span class="user_password">admin/123456</span>
					</div>
					<div>
						<span>商家:</span>
						<span class="user_password">10001/123456</span>
					</div>
				</div>
			</div>
		</section>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import UserIcon from '@@/icons/user'
import BusinussIcon from '@@/icons/businuss'
import LockIcon from '@@/icons/lock'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '@/router'
const formObj = ref()
const role = ref('admin')
const user_placeholder = computed(() => {
	if (role.value === 'admin')
		return '请输入管理员用户名'
	else
		return '请输入商家ID'
})
const wyform = reactive({
	username: '',
	password: ''
})
const rules = {
	username: [
		{ required: true, message: '请输入登录名', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入登录密码', trigger: 'blur' }
	]
}
function login () {
	formObj.value.validate(valid => {
		if (valid) {
			const url = `http://127.0.0.1:8080/${role.value}/login`
			axios.request({
				url,
				method: 'post',
				params: wyform
			}).then(response => {
				if (!response.data) {
					ElMessage.error('登录名或密码错误')
					return
				}
				router.push({
					path: role.value === 'admin' ? '/admin/index' : '/business/index'
				})
			}).catch(error => {
				ElMessage.error('网络错误')
			})
		}
	})
}
</script>

<style scoped lang="scss">
.login_wrapper {
	background-color: #EAF1FF;
	display: flex;
	height: 100vh;
	.login_block {
		width: 400px;
		height: 500px;
		background-color: #fff;
		margin: auto;
		border-radius: 20px;
		padding: 30px;
		h1,.welcome {
			text-align: center;
		}
		h1 {
			font-size: 2rem;
		}
		.welcome {
			margin-top: 10px;
			font-weight: 100;
		}
		.el-radio-group {
			margin-top: 40px;
			.button-block {
				display: flex;
				align-items: center;
				.el-icon {
					margin-right: 6px;
				}
			}
		}
		.el-form {
			margin-top: 20px;
		}
		.register {
			display: flex;
			align-items: center;
			justify-content: center;
			.el-link {
				margin-left: 10px;
				font-size: 1rem;
			}
		}
		.demo {
			margin-top: 26px;
			background-color: #F9FAFB;
			height: 80px;
			border-radius: 8px;
			padding: 16px;
			.login_user {
				margin-top: 5px;
				font-size: 0.75rem;
				color: #616161;
				.user_password {
					margin-left: 10px;
				}
			}
		}
	}
	
}
</style>